<template>
  <div class="notice-list">
    <div v-if="noticeList" class="notice-box">
      <p
        class="flex_between item"
        v-for="item in noticeList"
        :key="item.id"
        @click="showAlarmRecordsDialog(item)"
        :class="stateType[item.type || 0]"
      >
        <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
          :content="item.sn + '  ' + item.resource"
        >
          <template #reference>
            <span class="equipmentName">{{
              item.resource
            }}</span>
          </template>
        </el-popover>
        <span class="time">{{ item.created_at }}</span>
      </p>
    </div>
    <div v-else class="default-box">
      <h1>No Data</h1>
    </div>
  </div>
</template>

<script>
import API from 'api'
import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
import { useEventbus } from '@/hooks/useEventBus.js'
import { useI18n } from 'vue-i18n'

export default {
  name: 'noticeList',
  components: {},
  setup(props, ctx) {
    const { t } = useI18n()
    let state = reactive({
      noticeList: [],
      stateType: ['Alarm', 'Alarm', 'Fault'],
    })

    onMounted(() => {
      const eventBus = useEventbus()
      // 报警
      eventBus.emitterOn('AlarmMessage', (e) => {
        e.created_at = e.time
        state.noticeList.pop()
        state.noticeList.unshift(e)
      })
      // 故障
      eventBus.emitterOn('FaultMessage', (e) => {
        e.created_at = e.time
        state.noticeList.pop()
        state.noticeList.unshift(e)
      })
      API.alarmLogs().then((res) => {
        if (res.code == 0) {
          state.noticeList = res.data.list
          state.noticeList = state.noticeList.map(item => {
            return item
          })
        }
      })
    })

    const showAlarmRecordsDialog = (item) => {
      ctx.emit('changeAlarmDialog', item, true)
    }

    return {
      t,
      showAlarmRecordsDialog,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped>
.notice-list {
  width: 30vw;
  height: 18vw;
  background-color: rgba($color: #ccc, $alpha: 0.2);
  border-radius: 0.5rem;
  margin: 40px 0 10px;
  overflow: hidden;
  box-shadow: 1px 2px 7px #3b3b3b;
  .default-box {
    display: flex;
    height: 100%;
    text-align: center;
    color: rgba(0, 0, 0, 0.2);
    h1 {
      align-self: center;
      font-size: 4rem;
      width: 100%;
    }
  }
  .notice-box {
    box-sizing: border-box;
    padding: 1rem 0.625rem;

    .item {
      position: relative;
      padding: 0.625rem 0;
      padding-left: 25px;
      font-size: 12px;
      color: #475059;
      cursor: pointer;

      .equipmentName {
        max-width: 65%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      span {
        display: inline-block;
        padding-right: 0.625rem;
      }
    }
    .normal::after {
      position: absolute;
      left: 0px;
      content: '';
      width: 10px;
      height: 10px;
      background-color: green;
      border-radius: 50%;
    }
    .Alarm::after {
      position: absolute;
      left: 0px;
      content: '';
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
    }
    .Fault::after {
      position: absolute;
      left: 0px;
      content: '';
      width: 10px;
      height: 10px;
      background-color: orange;
      border-radius: 50%;
    }
  }
}
</style>
